import { BoolType, IModuleWithState } from '../types'
import { $, setDomBoolVal, setDomDataItemVal, toInt255 } from '../utils'
import { bus1 } from './bus'

interface IInputState {
    in_en: BoolType
    value: number
}

// 给页面中的输入框添加事件
function addInputEvent() {
    const dom = $('.input input')
    //  @ts-ignore
    dom.value = 0 + ''
    dom?.addEventListener('input', (e) => {
        // @ts-ignore
        let value = e.target.value
        // 设置input的值
        input.setState('value', toInt255(value))
        return
    })
}

/**
 * input模块
 */
export const input: IModuleWithState<IInputState> = {
    name: 'input',
    state: {
        in_en: 0,
        value: 0,
    },
    async setState(prop, value) {
        this.state[prop] = value
        if (prop === 'in_en') {
            setDomBoolVal(prop, this.state[prop] as BoolType)
        } else if (prop === 'value') {
            setDomDataItemVal('.input .data-item-val', this.state[prop])
        }
        if (prop !== 'value') {
            this.change!()
        }
        return
    },
    async change() {
        // 当in_en为1时，输入数据
        if (this.state.in_en === 1) {
            bus1.setData(this.state.value, 'input')
        }
    },
    init() {
        // 设置in_en的初始值
        setDomBoolVal('in_en', this.state.in_en)
        // 设置input
        setDomDataItemVal('.input .data-item-val', this.state['value'])
        // 给输入框添加事件
        addInputEvent()
    },
}
